@import "../../../assets/sass/mixin";
$border: 1px solid  #e9ecef;
.free-datatable {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  flex-direction: column;

  table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    table-layout: fixed;
    thead tr th {
      border-bottom: 1px solid #ccc;
    }
  }

  .free-datatable-head {
    position: relative;
    font-weight: 600;
    text-align: left;

    &.free-datatable-head-order {
      width: 45px;
    }
  }

  .free-expand-arrow {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    &:hover {
      background: rgba(0,0,0,.2);
    }
  }

  .free-column-resizer {
    display: block;
    position: absolute !important;
    top: 0;
    right: -.25rem;
    margin: 0;
    width: .5rem;
    height: 100%;
    padding: 0;
    cursor: col-resize;
    border: 1px solid transparent;
  }

  .free-column-resizer-line {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    cursor: col-resize;
  }

  .free-datatable-body {
    overflow: auto;
    min-height: 0;
    max-height: 12.5rem;

    table {
      border-right: none !important;
    }
  }

  .free-datatable-head-inner {
    @include flexbox;
    padding: .5rem 0;
    transition: all .4s cubic-bezier(.25,.8,.25,1);
  }

  .free-datatable-head .free-datatable-head-text {
    display: flex;
    align-items: center;
    padding: 0 .75rem;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;


    .free-datatable-sort {
      width: .7rem;
      line-height: .4rem;
      display: inline-block;
      padding-left: .25rem;
      color: #aaa;
      cursor: pointer;

      i {
        line-height: 4px;
        height: .3rem;
        overflow: hidden;

        &:hover,
        &.active {
          color: #333;
        }
      }
    }

  }

  .free-datatable-row {
    border-top: $border;

    &:first-child {
      border-top: none;
    }
  }

  .free-datatable-cell-inner {
    display: flex;
    padding: .5rem .75rem;
  }

  .free-datatable-cell {
    position: relative;
    transition: all .4s cubic-bezier(.25,.8,.25,1);
    font-size: .75rem;
  }

  tbody .free-datatable-row.free-selected .free-datatable-cell {
    background-color: #f5f5f5
  }

  &.free-datatable-hover tbody .free-datatable-row:hover .free-datatable-cell {
    background-color: #eee
  }

  &.free-datatable-striped tbody tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  &.free-datatable-bordered table {
    border: $border;
    tr td,
    tr th {
      border-left: $border;

      &:first-child {
        border-left: none;
      }
    }
  }

  .free-datatable-head-selection,
  .free-datatable-head-expand {
    text-align: center;
    min-width: 3.1rem;
    width: 3.1rem;
    word-break: break-all;
  }

  .free-datatable-footer {
    flex: 1 0 auto;
    padding: .5rem 0;
  }

  .free-datatable-scrollable {
    .free-datatable-scrollable-head {
      border: $border;
      border-bottom: none;
      background: #f5f5f5;

      table {
        border: none;
      }
    }
  }

  &.free-datatable-sort,
  .free-datatable-head-sort {
    .free-datatable-head-inner{
      cursor: pointer;
      transition: all .25s;
      &:hover {
        background: #eee;
      }
    }
  }
}
